<template>
  <div>
    <div class="breadCrumbInner">
      <!-- 面包屑 -->
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/face/homePage' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{
          productsOne[0].productCategoryId.productTypeName
            ? productsOne[0].productCategoryId.productTypeName
            : 加载中
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          productsOne[0].productName
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 中间内容 -->
    <div class="boxCont">
      <div class="boxInner_left">
        <img
          src="../../assets/images/3df9d556-c744-4319-a837-529fa25e29e9.png"
          class="boxInner_left_img"
        />
      </div>
      <div class="boxInner_right">
        <h1 class="boxInnerTit">{{ productsOne[0].productName }}</h1>
        <p class="boxInnerTitCon"></p>
        <!-- 产品名 -->
        <div class="boxInnerTitGrey">
          <ul>
            <li class="grey-left">优惠价：</li>
            <li class="grey-right">
              <span class="boxInnerJG">￥</span>
              <span class="boxInnerJG">{{ productsOne[0].price }}</span>
              <label class="boxInnerRed">起</label>
            </li>
          </ul>
        </div>
        <!-- 产品详情 -->
        <div class="modelEdit">
          <div class="boxInnerTx">
            <ul>
              <li class="width80">保险期限：</li>
              <li class="width260" v-if="productsOne[0].ontime == 60 * 60 * 24">
                一天
              </li>
              <li
                class="width260"
                v-else-if="productsOne[0].ontime == 60 * 60 * 24 * 7"
              >
                一周
              </li>
              <li
                class="width260"
                v-else-if="productsOne[0].ontime == 60 * 60 * 24 * 30"
              >
                一个月
              </li>
              <li
                class="width260"
                v-else-if="productsOne[0].ontime == 60 * 60 * 24 * 365"
              >
                一年
              </li>
            </ul>
            <ul>
              <li class="width80">承保年龄：</li>
              <li class="width260">0-100周岁</li>
            </ul>
            <ul>
              <li class="width80">销售区域：</li>
              <li class="width260">全国</li>
            </ul>
            <ul>
              <li class="width80">出生日期：</li>
              <li>
                <div class="block">
                  <el-date-picker
                    v-model="myMessage[0].birth"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
              </li>
            </ul>
          </div>
          <div class="boxInnerTitButton">
            <el-row>
              <el-button type="danger" @click="buyIt" :plain="true"
                >立即购买</el-button
              >
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单页  -->
    <div class="myDetails">
      <el-dialog
        title="订单详情"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div class="DingDan">
          <ul>
            <li class="width80">保险名称：</li>
            <li class="width260">{{ productsOne[0].productName }}</li>
          </ul>
          <ul>
            <li class="width80">保险金额：</li>
            <li class="width260">
              <span class="boxInnerJG">￥</span>
              <span class="boxInnerJG">{{ productsOne[0].price }}</span>
            </li>
          </ul>
          <ul>
            <li class="width80">保险期限：</li>
            <li class="width260" v-if="productsOne[0].ontime == 60 * 60 * 24">
              一天
            </li>
            <li
              class="width260"
              v-else-if="productsOne[0].ontime == 60 * 60 * 24 * 7"
            >
              一周
            </li>
            <li
              class="width260"
              v-else-if="productsOne[0].ontime == 60 * 60 * 24 * 30"
            >
              一个月
            </li>
            <li
              class="width260"
              v-else-if="productsOne[0].ontime == 60 * 60 * 24 * 365"
            >
              一年
            </li>
          </ul>
          <ul>
            <li class="width80">承保年龄：</li>
            <li class="width260">0-100周岁</li>
          </ul>
          <ul>
            <li class="width80">我的余额：</li>
            <li class="width260">{{ myMessage[0].wallet }}</li>
          </ul>
        </div>
        <p class="tishi">一经购买概不退款</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="danger" @click="submitDetails" :plain="true"
            >确认支付</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "homePage"
);

export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  created() {
    this.getProductsInfo(this.$route.query._id);
    this.getMessage(localStorage._id);
  },
  computed: {
    ...mapState(["productsOne", "myMessage"]),
  },
  methods: {
    ...mapActions(["getProductsInfo", "createOrder", "getMessage"]),
    //立即购买
    buyIt() {
      if (this.myMessage[0].age > 0 && this.myMessage[0].age < 100) {
        this.dialogVisible = true;
      } else {
        this.$message.error("你的年龄不在保险期限范围内！");
      }
    },
    // 订单提交
    async submitDetails() {
      if (this.myMessage[0].wallet >= this.productsOne[0].price) {
        this.dialogVisible = false;
        const data = await this.createOrder();
        if (data.status) {
          this.$message({
            message: "恭喜你，购买成功！",
            type: "success",
          });
        } else {
          this.$message.error("该保险您已购买，请勿重复购买！");
        }
      } else {
        this.$message({
          message: "余额不足！无法购买！请先充值！",
          type: "warning",
        });
      }
    },
    handleClose(done) {
      this.$confirm("你还有订单未提交，确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.breadCrumbInner {
  width: 1200px;
  padding: 15px;
  margin: 0 auto;
}
.boxCont {
  border: 1px solid #e8e8e8;
  padding: 30px 0 30px 30px;
  display: flex;
  margin: 10px auto;
  width: 1200px;
  .boxInner_left {
    width: 325px;
    height: 376px;
    text-align: center;
    .boxInner_left_img {
      border-style: none;
      width: 80%;
    }
  }
  .boxInner_right {
    .boxInnerTit {
      color: #005bac;
      font-size: 20px;
      font-weight: bold;
      padding-left: 15px;
      padding: 0;
      margin: 0;
      margin-left: 18px;
    }
    .boxInnerTitCon {
      font-size: 18px;
      display: block;
      margin-top: 10px;
      padding-left: 15px;
      padding: 0;
      margin: 0;
    }
    .boxInnerTitGrey {
      background: #f8f8f8;
      padding: 5px 15px;
      margin-top: 10px;
      font-size: 14px;
      font-weight: 600;
      ul {
        display: flex;
        list-style: none;
        margin-left: -38px;
        .grey-left {
          line-height: 28px;
          width: 80px;
          font-size: 14px;
          font-weight: 600;
        }
        .grey-right {
          width: 650px;
          line-height: 28px;
          .boxInnerJG {
            color: #e93543;
            font-size: 30px;
            font-weight: bold;
            margin-right: 5px;
          }
          .boxInnerRed {
            color: #e93543;
            font-weight: 100;
          }
        }
      }
    }
    .modelEdit {
      .boxInnerTx {
        ul {
          display: flex;
          align-items: center;
          border-bottom: 1px #e1e0e0 dashed;
          border-top: 1px #e1e0e0 dashed;
          padding: 0 0 0 15px;
          list-style: none;
          font-size: 14px;
          font-weight: 100;
          .width80 {
            line-height: 25px;
            width: 80px;
            font-size: 14px;
            font-weight: 600;
          }
          .width260 {
            line-height: 25px;
            width: 260px;
            padding-right: 56px;
          }
        }
      }
      .boxInnerTitButton {
        margin-top: 20px;
        margin-left: 18px;
      }
    }
  }
}
.myDetails {
  .el-dialog {
    .DingDan {
      ul {
        display: flex;
        align-items: center;
        padding: 0 0 15px 15px;
        list-style: none;
        font-size: 14px;
        font-weight: 100;
        .width80 {
          line-height: 25px;
          margin: 10px 0 0 0;
          width: 80px;
          font-size: 14px;
          font-weight: 600;
        }
        .width260 {
          line-height: 25px;
          margin: 10px 0 0 0;
          width: 260px;
          padding-right: 56px;
          .boxInnerJG {
            color: #e93543;
            font-size: 16px;
            font-weight: bold;
            margin-right: 5px;
          }
          .boxInnerRed {
            color: #e93543;
            font-weight: 100;
          }
        }
      }
    }
    .tishi{
      text-align: center;
      font-size: 12px;
      color: #e1e0e0;
    }
  }
}
</style>